<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	window.onload = function(){
		var canvas = document.getElementById('myCanvas');
	      var ctx = canvas.getContext('2d');
	      var ctx2 = canvas.getContext("2d");
	      var i = 0;
	      
	      canvas.width = 800;
	      canvas.height = 600;
	       
	      var mySprite = {
	          x: 200,
	          y: 200,
	          width: 50,
	          height: 50,
	          speed: 200,
	          color: '#c00'
	      };
	       
	      var keysDown = {};
	      window.addEventListener('keydown', function(e) {
	          keysDown[e.keyCode] = true;
	      });
	      window.addEventListener('keyup', function(e) {
	          delete keysDown[e.keyCode];
	      });
	       
	      function update(mod) {
	          if (37 in keysDown) {
	              mySprite.x -= mySprite.speed * mod;
	          }
	          if (38 in keysDown) {
	              mySprite.y -= mySprite.speed * mod;
	          }
	          if (39 in keysDown) {
	              mySprite.x += mySprite.speed * mod;
	          }
	          if (40 in keysDown) {
	              mySprite.y += mySprite.speed * mod;
	          }
	      }
	       
	      function render() {
	         if(i %2 == 0){
	            
	         ctx.strokeStyle = "#0000ff";
	         ctx.lineWidth = "3";
	         ctx.fillStyle = "#aaaaff";
	         ctx.fill();
	         ctx.beginPath();
	         ctx.moveTo(mySprite.x,mySprite.y);
	         ctx.arc(mySprite.x,mySprite.y,45,Math.PI*1.8,Math.PI*0.2,true);
	         ctx.closePath();
	         ctx.fill();
	         ctx.stroke();
	         }
	         else{
	            ctx.strokeStyle = "#0000ff";
	            ctx.lineWidth = "3";
	            ctx.fillStyle = "#aaaaff";
	            ctx.fill();
	            ctx.beginPath();
	            ctx.moveTo(mySprite.x,mySprite.y);
	            ctx.arc(mySprite.x,mySprite.y,45,Math.PI*0,Math.PI*2.0,true);
	            ctx.closePath();
	            ctx.fill();
	            ctx.stroke();
	         }
	         ctx2.strokeStyle = "#ff00ff";
	         ctx2.lineWidth = "3";
	         ctx2.fillStyle = "#aaffff";
	         ctx2.beginPath();
	         ctx2.arc(mySprite.x+10,mySprite.y-30,10,0,Math.PI*2.0, true);
	         ctx2.fill();
	         ctx2.closePath();
	         ctx2.stroke();
	         i++;
	      }
	       
	      function run() {
	         ctx.clearRect(0,0,600,500);
	         ctx2.clearRect(0,0,600,500);
	          update((Date.now()- time) / 1000);
	          render();
	          time = Date.now();
	      }
	       
	      var time = Date.now(); 
	      setInterval(run, 100);
	      
	}
</script>
</head>
<body> 	
<Canvas id = 'myCanvas' width = '600px', height='500px'> </Canvas>
</body>
</html>